<template>
	<view>
		<view class="order-detail-container">
			<view class="order-detail-header">
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信小程序中不显示按钮 -->
				<!-- #endif -->

				<!-- #ifndef MP-WEIXIN -->
				<!-- 非微信小程序平台（包括iOS和Android）显示按钮 -->
				<view class="back-icon">
					<uni-icons type="left" size="25" @click="backOrderList()"></uni-icons>
				</view>
				<!-- #endif -->
				<view class="title">
					订单详情
				</view>
			</view>
			<view class="order-detail-content" :class="{'padding-bottom': currentStatusCode!=0}">
				<view class="tip-banner">
					<view class="tip-banner-inner" v-for="(item,index) in orderStatusList" :key="index"
						v-show="item.statusCode=== currentStatusCode">
						<view class="inner-left">
							<view class="tip-status"
								:class="{'have-tiptext': item.tipText!==null,'null-tiptext': item.tipText==null}">
								{{item.tipStatus}}
							</view>
							<view class="tip-text">
								<text v-show="currentStatusCode!=2 && currentStatusCode !=4">{{item.tipText}}</text>
								<text v-show="currentStatusCode==4">预计送达</text>

								<text v-show="currentStatusCode==2">
									请在{{remainingTime}}分内完成支付
								</text>
							</view>
						</view>
						<view class="inner-right">
							<view class="tip-icon">
								<img class="status-icon" :src="item.img" alt="" />
							</view>
						</view>
					</view>
				</view>
				<view class="all-ticket-info-box">
					<view class="ticket-info-box">
						<view class="ticket-info-box-left">
							<view class="show-img-section">
								<img class="show-img" :src="orderDetailData.allData.orderData.showImg" alt="" />
							</view>
						</view>
						<view class="ticket-info-box-right">
							<view class="show-name">
								{{orderDetailData.allData.orderData.showName}}
							</view>
							<view class="venues-name">
								{{orderDetailData.allData.orderData.venues}}
							</view>
							<view class="show-time">
								{{orderDetailData.allData.orderData.showTime}}
							</view>
							<view class="per-ticket-price">
								<text class="price">
									{{orderDetailData.allData.orderData.perTicketPrice}}
								</text>元
								<text class="mount">x{{orderDetailData.allData.orderData.limitNum}}</text>
							</view>
						</view>
					</view>
					<view class="spectator-box-content" v-if="currentStatusCode!=0 && currentStatusCode!= 2">
						<view class="spectator-list">
							<view class="spectator-item" v-for="(item,index) in displaySpectatorList" :key="index">
								<view class="spectator-item-left">
									<view class="spectator-name">
										{{item.spectatorName}}
									</view>
									<view class="spectator-idcard">
										{{item.spectatorIdCardType}}：{{item.displayIdCard}}
									</view>
								</view>
								<view class="spectator-item-right">
									{{orderDetailData.allData.orderData.ticketType}} {{orderDetailData.allData.orderData.seatInfo[index]}}
								</view>
							</view>
						</view>
					</view>
				</view>
				
				
				<view class="price-detail-box">
					<view class="price-detail-box-top">
						<view class="detail-row">
							<view class="detail-row-text">
								商品总价
							</view>
							<view class="detail-row-price">
								￥{{orderDetailData.allData.orderData.totalPrice}}
							</view>
						</view>
						<view class="detail-row">
							<view class="detail-row-text">
								运费
							</view>
							<view class="detail-row-price">
								￥{{orderDetailData.allData.fees}}
							</view>
						</view>
						<view class="detail-row" v-if="orderDetailData.allData.orderData.coupons!==0">
							<view class="detail-row-text">
								优惠券
							</view>
							<view class="detail-row-price">
								{{orderDetailData.allData.orderData.coupons}}
							</view>
						</view>
					</view>
					<view class="price-detail-box-bottom">
						需付款 <text class="pirce-font">￥{{orderDetailData.allData.orderData.totalPrice}}</text>
					</view>
				</view>
				<view class="">

				</view>
				<view class="get-ticket-way-box">
					<view class="get-ticket-way-box-header">
						<view class="get-ticket-way-text">
							取票方式
						</view>
						<view class="get-ticket-way-type">
							{{orderDetailData.allData.orderData.getDistributionType}}
						</view>
					</view>
					<view class="get-ticket"
						v-if="orderDetailData.allData.orderData.getDistributionType==deliveryMethodTwo">
						<view class="get-ticket-way-box-content">
							<view class="get-ticket-way-text">
								取票人
							</view>
							<view class="get-ticket-way-person">
								{{globalData.userInfo.nickName}}
							</view>
						</view>
						<view class="get-ticket-way-box-footer">
							<view class="get-ticket-way-text">
								联系方式
							</view>
							<view class="get-ticket-way-phone">
								{{globalData.userInfo.phone}}
							</view>
						</view>
					</view>
					<view class="express"
						v-if="orderDetailData.allData.orderData.getDistributionType==deliveryMethodOne">
						<view class="express-box-content">
							<view class="express-box-content-left">
								<view class="address-have">
									<view class="express-box-content-top-section">
										{{orderDetailData.allData.addressObj.name}}
										{{orderDetailData.allData.addressObj.phone}}
									</view>
									<view class="express-box-content-bottom-section">
										{{orderDetailData.allData.addressObj.baseAddress[0].text}}{{orderDetailData.allData.addressObj.baseAddress[1].text}}{{orderDetailData.allData.addressObj.baseAddress[2].text}}{{orderDetailData.allData.addressObj.addressDetail}}
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="spectator-box" v-if="currentStatusCode==0 || currentStatusCode == 2">
					<view class="spectator-text">
						观演人
					</view>
					<view class="spectator-box-content">
						<view class="spectator-list">
							<view class="spectator-item" v-for="(item,index) in displaySpectatorList" :key="index">
								<view class="spectator-item-left">
									<view class="spectator-name">
										{{item.spectatorName}}
									</view>
									<view class="spectator-idcard">
										{{item.spectatorIdCardType}}：{{item.displayIdCard}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="order-info-box">
					<view class="order-number">
						<text>订单编号：</text>
						<text class="data">{{orderDetailData.orderNumber}}</text>
					</view>
					<view class="order-create-time">
						<text>创建时间：</text>
						<text class="data">{{orderDetailData.orderCreateTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="order-detail-btn-box" v-show="currentStatusCode!= 0">
			<view class="btn-content" v-for="(item,index) in btnList" :key="index"
				v-show="item.btnStatusCode === currentStatusCode">
				<view class="btn-item" v-for="(el,index) in item.list" :key="index" :class="{'btn-light': el.btnName === btnTypeOfCancelOrder 
				|| el.btnName === btnTypeOfSeeLogistics 
				|| el.btnName === btnTypeOfDelOrder,
				'btn-orange': el.btnName === btnTypeOfGoPay 
				|| el.btnName === btnTypeOfConfirmReceive 
				|| el.btnName === btnTypeOfQRCode 
				|| el.btnName === btnTypeOfCommnent}" @click="operation(el.btnName)">
					{{el.btnName}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ORDER_STATUS_DICTIONARY
	} from '@/common/orderStatusDict.js'
	import {
		maskIdCard
	} from '@/common/maskidcard.js';
	import {
		ORDER_DICTIONARY
	} from '@/common/orderDict.js';
	import {
		BTN_LIST
	} from '@/common/btnList.js'
	import {
		sharedState,
		updateState
	} from '@/common/store.js'
	import generateSeat from '@/common/seatGenerator.js'
	import {
		ref,
		onMounted,
		watch,
		watchEffect,
		onUnmounted,
		inject,
		onBeforeMount
	} from 'vue';
import { onShow, onHide, onUnload, onLoad } from '@dcloudio/uni-app';
	const {
		deliveryMethodOne,
		deliveryMethodTwo,
		btnTypeOfCancelOrder,
		btnTypeOfGoPay,
		btnTypeOfSeeLogistics,
		btnTypeOfConfirmReceive,
		btnTypeOfQRCode,
		btnTypeOfDelOrder,
		btnTypeOfCommnent
	} = ORDER_DICTIONARY;

	const btnList = ref([]);

	//全局数据
	const globalData = inject('globalData');

	const orderStatusList = ref(ORDER_STATUS_DICTIONARY);

	const currentStatusCode = ref(0);

	const orderDetailData = ref(null);

	const remainingTime = ref('15:00'); // 初始化剩余时间为15分钟

	const spectatorList = ref([]);

	const orderList = ref([]);

	const displaySpectatorList = ref([]);

	const backOrderList = () => {
		const selectedItem = btnList.value.find(item => item.btnStatusCode ===
			currentStatusCode.value);
			orderDetailData.value.btnList = selectedItem;
			orderDetailData.value.time = remainingTime.value;
		
		orderList.value.push({
			...orderDetailData.value,
			orderId: orderList.value.length
		});
		uni.setStorage({
			key: 'toOrderList',
			data: orderList.value,
			success: function() {
				console.log('数据存储成功');
				uni.redirectTo({
					url: "/pages/orderlist/orderlist"
				})
			},
			fail: function(err) {
				console.error('数据存储失败', err);
			}
		});
	}
	onBeforeMount(() => {
		
		btnList.value = BTN_LIST;
		console.log("btnList:", btnList.value);

			uni.getStorage({
				key: 'toOrderDetail',
				success: function(res) {
					console.log('获取支付跳转订单详情数据:', res.data);
					currentStatusCode.value = res.data.setOrderStatus;
					orderDetailData.value = res.data;
					
						console.log(orderDetailData.value);
					spectatorList.value = res.data.allData.spectatorList
			
					spectatorList.value.forEach(item => {
						displaySpectatorList.value.push({
							...item,
							displayIdCard: maskIdCard(item.spectatorIdNumber)
						});
					});
					// 将存储的时间转换为秒
					const [minutes, seconds] = res.data.time.split(':').map(Number);
					const totalSeconds = minutes * 60 + seconds;
			
					remainingTime.value = res.data.time;
					// 设置倒计时
					startCountDown(totalSeconds);
			
					// selectedItem.tipText = "请在"+remainingTime.value+"分内完成支付";
				},
				fail: function(err) {
					console.error('获取数据失败', err);
				}
			});
	
		
			
		
		

	})

	const operation = (btnName) => {
		if (btnName == btnTypeOfCancelOrder) {

			uni.showModal({
				content: '支付未完成，是否要取消订单？',
				confirmText: '确定',
				cancelText: '取消',
				confirmColor: '#ff2d2de2',
				success: (res) => {
					if (res.confirm) {
						currentStatusCode.value = 0;
						orderDetailData.value.setOrderStatus = 0;
						uni.setStorage({
							key: 'toOrderDetail',
							data: orderDetailData.value,
							success: function() {
								console.log('数据存储成功');
								uni.redirectTo({
									url: "/pages/orderdetail/orderdetail"
								})
							},
							fail: function(err) {
								console.error('数据存储失败', err);
							}
						});


					} else if (res.cancel) {
						// 用户点击了取消，什么也不做
						console.log('用户点击了取消');
					}
				},
				fail: (err) => {
					console.error('模态对话框调用失败', err);
				}
			});
		} else if (btnName == btnTypeOfCommnent) {

		} else if (btnName == btnTypeOfConfirmReceive) {

		} else if (btnName == btnTypeOfDelOrder) {

		} else if (btnName == btnTypeOfGoPay) {


		} else if (btnName == btnTypeOfQRCode) {

		} else if (btnName == btnTypeOfSeeLogistics) {

		}
	}

	onUnmounted(() => {
		if (timer.value) {
			clearInterval(timer.value);
		}
		   const [minutes, seconds] = remainingTime.value.split(':').map(Number);
		    const totalSeconds = minutes * 60 + seconds;
		    saveRemainingTime(totalSeconds);
	});

	const timer = ref(null);

	const formatTime = (totalSeconds) => {
		const minutes = Math.floor(totalSeconds / 60);
		const seconds = totalSeconds % 60;
		return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
	};
	

	const startCountDown = (totalSeconds) => {
		if (timer.value) {
			clearInterval(timer.value);
		}
		

		timer.value = setInterval(() => {
			if (totalSeconds > 0) {
				totalSeconds -= 1;
				remainingTime.value = formatTime(totalSeconds);
			} else {
				clearInterval(timer.value);
				// 倒计时结束，可以在这里处理相关逻辑
			}
		}, 1000);
	};
	
	
	
	
</script>

<style lang="scss" scoped>
	.order-detail-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		display: block;
		background: #f8f8fe;
		color: #333;

		.order-detail-header {
			top: 0px;
			width: 100%;
			height: 50px;
			display: flex;
			position: fixed;
			z-index: 1000;
			background: #fff;
			box-sizing: border-box;
			text-align: center;
			justify-content: center;
			align-items: center;
			box-shadow: 0px 0px 4px 0px #d3d3d3;

			.title {
				position: absolute;
				line-height: 50px;
				font-size: 18px;
				z-index: 5;
				height: 50px;
			}

			.back-icon {
				z-index: 10;
				position: absolute;
				left: 10px;

			}
		}

		.order-detail-content {
			width: 100%;
			height: auto;
			background: #f8f8fe;
			margin-top: 50px;
			padding-bottom: 20px;
			float: left;
			box-sizing: border-box;

			.tip-banner {
				background: linear-gradient(90deg, #ff383a 0%, #ff383a 0%, #f67373 100%, #f67373 100%);
				width: 100%;
				height: 90px;

				.tip-banner-inner {
					width: 100%;
					height: 90px;
					box-sizing: border-box;
					padding: 0px 20px;

					.inner-left {
						width: calc(100% - 100px);
						height: 90px;
						float: left;

						.tip-status {
							width: 100%;
							font-size: 16px;
							color: #fff;
						}

						.tip-text {
							width: 100%;
							height: 45px;
							line-height: 25px;
							font-size: 12px;
							color: #fff;
						}
					}

					.inner-right {
						width: 45px;
						height: 90px;
						float: right;
						display: flex;
						align-items: center;

						.tip-icon {
							.status-icon {
								width: 45px;
								height: 45px;
							}
						}
					}
				}
			}
             .all-ticket-info-box {
				width: calc(100% - 40px);
				height: auto;
				float: left;
				margin: 0px 20px;
				margin-top: 20px;
				box-sizing: border-box;
				padding: 20px;
				background: #fff;
				border-radius: 8px;
				box-shadow: 0px 0px 2px 0px #ddd;
				padding-bottom: 0px;
				
				.ticket-info-box {
					width: 100%;
					height: 140px;
					float: left;
					box-sizing: border-box;
				
					.ticket-info-box-left {
						width: 80px;
						height: 120px;
						float: left;
				
						.show-img-section {
							width: 80px;
							height: 120px;
				
							.show-img {
								width: 80px;
								height: 120px;
							}
						}
					}
				
					.ticket-info-box-right {
						width: calc(100% - 80px);
						height: 120px;
						float: left;
						box-sizing: border-box;
						padding-left: 15px;
				
						.show-name {
							height: 30px;
							line-height: 30px;
							font-size: 14px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
				
						.venues-name {
							height: 30px;
							line-height: 30px;
							font-size: 12px;
							color: #666666;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
				
						.show-time {
							height: 30px;
							line-height: 30px;
							font-size: 12px;
						}
				
						.per-ticket-price {
							height: 30px;
							line-height: 30px;
							font-size: 12px;
							color: #999;
				
							.price {
								font-size: 14px !important;
								color: #333 !important;
							}
				
							.mount {
								font-size: 18px;
								float: right;
								text-align: right;
							}
						}
					}
				}
				.spectator-box-content {
					width: 100%;
					height: auto;
					float: left;
				
					.spectator-list {
						.spectator-item {
							width: 100%;
							height: auto;
							float: left;
							border-top: 1px solid #ddd;
							box-sizing: border-box;
							padding: 10px 0px;
				
							.spectator-item-left {
								width: calc(100% - 140px);
								height: 56px;
								float: left;
				
								.spectator-name {
									width: auto;
									height: 28px;
									line-height: 35px;
									font-size: 14px;
									color: #333;
									font-weight: bold;
								}
				
								.spectator-idcard {
									width: 100%;
									height: 28px;
									font-size: 12px;
									line-height: 25px;
									color: #999;
								}
				
							}
				
							.spectator-item-right {
								width: 140px;
								height: 56px;
								float: right;
								font-size: 12px;
								line-height: 56px;
								text-align: right;
			
							}
						}
					}
				}
			 }
			

			.price-detail-box {
				width: calc(100% - 40px);
				height: auto;
				float: left;
				margin: 0px 20px;
				margin-top: 20px;
				box-sizing: border-box;
				padding: 0px 20px;
				background: #fff;
				border-radius: 8px;
				box-shadow: 0px 0px 2px 0px #ddd;

				.price-detail-box-top {
					height: auto;
					box-sizing: border-box;
					padding: 15px 0px;

					.detail-row {
						height: 30px;
						line-height: 30px;
						font-size: 12px;

						.detail-row-text {
							float: left;
							color: #999;

						}

						.detail-row-price {
							float: right;
						}
					}
				}

				.price-detail-box-bottom {
					text-align: right;
					border-top: 1px solid #ddd;
					height: 60px;
					line-height: 60px;
					font-size: 12px;

					.pirce-font {
						color: #ff2d2de2;
						font-size: 16px;
					}
				}
			}

			.address-box {
				width: calc(100% - 40px);
				height: 131px;
				float: left;
				margin: 0px 20px;
				margin-top: 20px;
				box-sizing: border-box;
				padding: 0px 20px;
				background: #fff;
				border-radius: 8px;
				box-shadow: 0px 0px 2px 0px #ddd;

				.address-text {
					width: 100%;
					height: 50px;
					border-bottom: 1px solid #ddd;
					font-size: 14px;
					line-height: 50px;

					.right {
						float: right;
					}
				}

				.address-context {
					width: 100%;
					height: 80px;
					font-size: 14px;

					.address-top-section {
						width: 100%;
						height: 40px;
						line-height: 55px;
						font-size: 12px;

						.addr-name {
							font-size: 14px;
						}

						.addr-phone {
							color: #999;
							font-size: 12px;
							margin-left: 5px;
						}
					}

					.address-bottom-section {
						width: 100%;
						height: 40px;
						line-height: 25px;
						color: #999;
						font-size: 12px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

				}
			}

			.get-ticket-way-box {
				width: calc(100% - 40px);
				height: auto;
				float: left;
				margin: 0px 20px;
				margin-top: 20px;
				box-sizing: border-box;
				padding: 0px 20px;
				background: #fff;
				border-radius: 8px;
				box-shadow: 0px 0px 2px 0px #ddd;

				.get-ticket-way-text {
					height: 55px;
					line-height: 55px;
					float: left;
				}

				.get-ticket-way-box-header {
					width: 100%;
					height: 55px;
					float: left;
					box-sizing: border-box;
					border-bottom: 1px solid #ddd;
					font-size: 14px;

					.get-ticket-way-type {
						height: 55px;
						line-height: 55px;
						float: right;
					}
				}

				.get-ticket-way-box-content {
					width: 100%;
					height: 55px;
					float: left;
					box-sizing: border-box;
					border-bottom: 1px solid #ddd;
					font-size: 14px;

					.get-ticket-way-person {
						height: 55px;
						line-height: 55px;
						float: right;
					}
				}

				.get-ticket-way-box-footer {
					width: 100%;
					height: 55px;
					float: left;
					box-sizing: border-box;
					font-size: 14px;

					.get-ticket-way-phone {
						height: 55px;
						line-height: 55px;
						float: right;
					}
				}

				.express-box-content {
					width: 100%;
					height: auto;
					float: left;
					box-sizing: border-box;
					font-size: 14px;

					.express-box-content-left {
						width: 100%;
						height: auto;
						float: left;

						.address-null {
							width: 100%;
							height: 55px;
							line-height: 55px;
							float: left;
						}

						.address-have {
							width: 100%;
							height: 80px;
							float: left;

							.express-box-content-top-section {
								font-size: 14px;
								color: #333;
								height: 40px;
								line-height: 50px;
							}

							.express-box-content-bottom-section {
								font-size: 12px;
								height: 40px;
								line-height: 30px;
								color: #999;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}


					}

					.express-box-content-right {
						width: 20px;
						height: auto;
						display: flex;
						align-items: center;
						float: right;

						.right-icon {}
					}
				}

				.express-box-footer {
					width: calc(100% - 30px);
					height: 55px;
					float: left;
					box-sizing: border-box;
					margin: 0px 15px;
					font-size: 14px;

					.express-text {
						height: 55px;
						line-height: 55px;
						float: left;
					}

					.express-cost {
						height: 55px;
						line-height: 55px;
						float: right;
					}
				}
			}

			.spectator-box {
				width: calc(100% - 40px);
				height: auto;
				float: left;
				margin: 0px 20px;
				margin-top: 20px;
				box-sizing: border-box;
				padding: 0px 20px;
				background: #fff;
				border-radius: 8px;
				box-shadow: 0px 0px 2px 0px #ddd;

				.spectator-text {
					width: 100%;
					height: 50px;
					font-size: 14px;
					line-height: 50px;
				}

				.spectator-box-content {
					width: 100%;
					height: auto;
					float: left;

					.spectator-list {
						.spectator-item {
							width: 100%;
							height: auto;
							float: left;
							border-top: 1px solid #ddd;
							box-sizing: border-box;
							padding: 10px 0px;

							.spectator-item-left {
								width: calc(100% - 30px);
								height: 56px;
								float: left;

								.spectator-name {
									width: auto;
									height: 28px;
									line-height: 35px;
									font-size: 14px;
									color: #333;
									font-weight: bold;
								}

								.spectator-idcard {
									width: 100%;
									height: 28px;
									font-size: 12px;
									line-height: 25px;
									color: #999;
								}

							}

							.spectator-item-right {
								width: 20px;
								height: 56px;
								float: right;

								.del-icon {
									line-height: 56px;
									text-align: right;
								}
							}
						}
					}
				}
			}

			.order-info-box {
				width: calc(100% - 40px);
				height: auto;
				float: left;
				margin: 0px 20px;
				margin-top: 20px;
				box-sizing: border-box;
				padding: 20px;
				background: #fff;
				border-radius: 8px;
				box-shadow: 0px 0px 2px 0px #ddd;
				font-size: 12px;

				.order-number {
					width: 100%;
					height: 30px;
					line-height: 30px;

					color: #999;

					.data {
						color: #333;
						margin-left: 20px;
					}
				}

				.order-create-time {

					width: 100%;
					height: 30px;
					line-height: 30px;
					color: #999;

					.data {
						color: #333;
						margin-left: 20px;
					}
				}
			}
		}

	}

	.order-detail-btn-box {
		width: 100%;
		height: 80px;
		background: #fff;
		box-sizing: border-box;
		padding: 25px 20px;
		position: fixed;
		bottom: 0px;
		box-shadow: 0px 0px 4px 0px #d3d3d3;

		.btn-content {
			float: right;
			width: auto;
			height: 30px;

			.btn-item {
				float: left;
				height: 30px;
				font-size: 12px;
				line-height: 30px;
				width: auto;
				border-radius: 3px;
				box-sizing: border-box;
				padding: 0px 20px;
				margin: 0px;
				margin-left: 10px;
			}
		}
	}


	.have-tiptext {
		height: 45px;
		line-height: 65px;
	}

	.null-tiptext {
		height: 90px;
		line-height: 90px;
	}

	.btn-light {
		border: 1px solid #ddd;
		color: #333;
	}

	.btn-orange {
		border: 1px solid #ff2d2de2;
		color: #ff2d2de2;
	}

	.padding-bottom {
		padding-bottom: 100px !important;
	}
</style>